<!--
  by: wangdabao
-->
<template>
  <div>
    <el-form ref="ruleForm" v-bind="wangForm.config" :model="model">
      <el-row
        v-for="(row, index) in rows"
        :key="index"
        v-bind="wangForm.rowStyle"
      >
        <template>
          <el-col
            v-for="item in rowFunList(row, index)"
            :key="item.key"
            :span="item.span"
          >
            <form-item :item="item" :model="model">
              <template :slot="item.slotName">
                <slot :name="item.slotName" :value="item" :index="index" />
              </template>
            </form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <slot name="Submit" />
  </div>
</template>

<script>
import FormItem from './FormItem.vue'
export default {
  name: 'WangForm',
  components: {
    FormItem
  },
  props: {
    wangForm: {
      type: Object,
      default: () => {}
    },
    models: {
      type: Object,
      default: () => {}
    },
    keys: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      model: {},
      rows: []
    }
  },
  computed: {
    // watcher() {
    //   this.modelsFun(this.models);
    //   return this.models;
    // },
  },
  watch: {
    models: {
      handler(val, low) {
        if (val) {
          this.modelsFun(val)
        }
      },
      deep: true,
      immediate: true
    },
    wangForm: {
      handler(val, low) {
        if (val) {
          this.modelFun(val)
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  created() {},
  mounted() {},
  methods: {
    modelsFun() {
      const keys = Object.keys(this.models)
      // if (!keys.length) {
      // this.wangForm.list.forEach((item) => {
      //   if (this.getDataType(item.options.defaultValue) == "String") {
      //     item.options.defaultValue = "";
      //   } else if (this.getDataType(item.options.defaultValue) == "Array") {
      //     item.options.defaultValue = [];
      //   }
      // });
      // } else {
      this.wangForm.list.forEach((item) => {
        if (keys.includes(item.key).length) {
          item.options.defaultValue = this.models[item.key]
        }
      })
      for (const k in this.models) {
        if (k.length) {
          this.wangForm.list.forEach((item) => {
            if (item.key == k) {
              item.options.defaultValue = this.models[k]
            }
          })
        }
      }
      // }
    },
    // 判断数据类型
    getDataType(value) {
      return Object.prototype.toString.call(value).slice(8, -1)
    },
    // 获取字段以及value
    modelFun() {
      for (const item of this.wangForm.list) {
        this.$set(this.model, item.key, item.options.defaultValue)
      }
      this.rowSpan()
      this.wangForm.list.forEach((item) => {
        if (item.type == 'Input') {

        }
        this.models[item.key] = item.options.defaultValue
      })
    },
    rowFunList(row, index) {
      let num = 0
      for (let i = 0; i < index; i++) {
        num = num + this.rows[i].length
      }
      return this.wangForm.list.slice(num, num + row.length)
    },
    rowSpan() {
      const spans = []
      this.wangForm.list.forEach((item) => {
        spans.push(item.span)
      })
      this.spanAllocation(spans, this.wangForm.rowStyle.gutter)
    },
    spanAllocation(spans, maxPerRow) {
      let num = 0
      this.rows = []
      let arr = []
      spans.forEach((item, index) => {
        if (maxPerRow === item) {
          if (arr.length === 0) {
            arr.push(item)
            this.rows.push(arr)
            arr = []
          } else {
            this.rows.push(arr)
            arr = []
          }
        } else {
          arr.push(item)
          num = num + item
          if (
            num >= maxPerRow ||
            num + item > maxPerRow ||
            num + spans[index + 1] > maxPerRow
          ) {
            num = 0
            this.rows.push(arr)
            arr = []
          } else {
            if (spans.length === index + 1) {
              this.rows.push(arr)
              arr = []
            }
          }
        }
      })
    }
  }
}
</script>

<style>
</style>
